{% extends "base.html" %} 
{% block headtitle %}kindly.cz - Statistka{% endblock %} 

{% block head %}  
	
	<script type="text/javascript">
		function getSubscriberWidth(maxSubscribers) {
			var maxWidth = 300;
			var minWidth = 20;	
			if (maxSubscribers > 0) {
				return subscriberWidth = (maxWidth - minWidth) / maxSubscribers;
			} 
			return 0;
		}
		
		function jqload() {
			var minWidth = 20;
			var subscriberWidth;
			// periodicals
			subscriberWidth = getSubscriberWidth({{statInfo.max}});			
			$("#periodicals div.chartBar").each(function() {			
				subscribers = $(this).text()				
				width = minWidth + parseInt(subscribers) * subscriberWidth;
				$(this).css("width", width + "px")
			})
			
			// books
			subscriberWidth = getSubscriberWidth({{statInfo.maxBooks}});			
			$("#books div.chartBar").each(function() {			
				subscribers = $(this).text()				
				width = minWidth + parseInt(subscribers) * subscriberWidth;
				$(this).css("width", width + "px")
			})
		}		
	</script> 	   
{% endblock %}

{% block content %} 


<h1 class="sectionHeading" style="background-image: url('/images/Statistics.png')">Statistika</h1>

<p>Statistika vygenerována: <strong>{{statInfo.updated}}</strong></p>
<h2>Periodika</h2>
<table class="chart alt list" id="periodicals">
	<tr>		
		<th>&nbsp;</th>
		<th>Počet odběratelů</th>	
		<th></th>		
	</tr>	
	{% for stat in stats %}	
	<tr>		
		<td>{{stat.periodical}}</td>
		<td><div class="chartBar">{{stat.subscribers}}</div></td>
		<td></td>
	</tr>
	{% endfor %}
</table>	

<h2>Knihy</h2>
<table class="chart alt list" id="books">
	<tr>		
		<th>&nbsp;</th>
		<th>Počet stažení</th>	
		<th></th>		
	</tr>	
	{% for stat in bookStats %}	
	<tr>		
		<td>{{stat.book}}</td>
		<td><div class="chartBar">{{stat.downloaded}}</div></td>
		<td></td>
	</tr>
	{% endfor %}
</table>	


{% endblock %}
